<template>
  <div class="comment-box">
    <a-card :style="{ minHeight: '670px' }">
      <a-input-search style="margin-bottom: 15px"
                      size="large"
                      v-model="searchKey"
                      @search="searchComment"
                      placeholder="Please enter searchKey" />
      <a-row :gutter="15">
        <a-col :span="21">
          <a-textarea placeholder="Please enter comment"
                      :max-length="100"
                      allow-clear
                      show-word-limit
                      v-model="commentContent" />
        </a-col>
        <a-col :span="3">
          <a-button @click="sendComment">
            发布
          </a-button>
        </a-col>
      </a-row>
      <a-list :max-height="500">
        <a-list-item v-for="comment in commentList" :key="comment.id">
          <CommentItem :comment="comment" />
        </a-list-item>
      </a-list>

    </a-card>
  </div>
</template>

<script setup lang="ts">
import CommentItem from "@/components/CommentItem.vue";
import { onMounted, ref } from "vue";
import { CommentControllerService, QuestionSubmitControllerService } from "../../generated";
import { useRoute } from "vue-router";
import { useStore } from "vuex";
import { Message } from "@arco-design/web-vue";

const store = useStore();
const route = useRoute();
const searchKey = ref();
const commentContent = ref();
const commentList = ref([{
  content: "",
  username: "",
  avatar: ""
}]);
let uid = null;
let qid = route.query?.id;
const searchComment = async () => {
  console.log("searchComment.. ...");
  if (!searchKey.value) {
    getCommentList();
    return;
  }
  let res = await CommentControllerService.searchCommentVoByPageUsingPost({
    searchText: searchKey.value,
    pageSize: 15,
    current: 1
  });
  if (res.code == 0) {
    commentList.value = res.data.records;
  }
};
const sendComment = async () => {
  console.log("sendComment.. ...");
  if (!commentContent.value) {
    Message.error("评论内容不能为空")
    return;
  }
  // 发评论
  let res = await CommentControllerService.addCommentUsingPost({
      content: commentContent.value,
      questionid: qid,
      userid: uid
    });
  if (res.code == 0) {
    // 重新请求评论
    getCommentList();
    commentContent.value = '';
    Message.success("评论成功");
  }else {
    Message.error("评论失败");
  }

};
const getCommentList =  async () => {
  console.log('qid', store.state.team.team);
  let res = await CommentControllerService.listCommentByQuestionIdUsingGet(qid);
  console.log('commentList', res);
  if (res.code == 0) {
    commentList.value = res.data;
  }else {
    Message.error("获取评论列表失败");
  }
}
onMounted(() => {
  uid = store.state.user.curUser.id;
  qid = route.query.id;
  console.log('ttt', store.state.team.team);
  getCommentList();
})
</script>

<style scoped>

</style>